
<!--  这是登录组件  -->
<template>
	<view class="login-container">
		<uni-icons type="person" size="100"></uni-icons>
		<button type="primary" class="btn-login" open-type="getUserInfo"  @getuserinfo="onLogin">一键登录</button>
		<text class="tips-text">登录后尽享更多权益</text>

	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		
		methods: {
			...mapMutations('m_user',['updateUserInfo','updateToken']),
			
			onLogin(e){
				if(e.detail.errMsg  === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消用户授权')
				console.log(e.detail.userInfo)
				// 保存用户信息到vuex中 
			    this.updateUserInfo(e.detail.userInfo)
				
				// 获取token
				this.getToken(e.detail)
			},
			
			
			// 获取token
			async getToken(info){
				// 调用微信的登录api获取 code
				const [err, res] = await uni.login().catch(err => err)
				if( err  ||   res.errMsg !== 'login:ok') return uni.$showMsg('登录失败')
				console.log("调用uni.login()返回的res:",res)
				
				// 真正的登录，请求后端接口
				const query = {
					code: res.code,
					encryptedData:info.encryptedData,
					iv:info.iv,
					signature:info.signature,
					rawData:info.rawData
							
				}
				
				const  {data:resdata} = await uni.$http.post('/wx/user/login',query)
				if(resdata.code !== '0') return uni.$showMsg('登录失败') 
				this.updateToken(resdata.data)
				uni.$showMsg('登录成功')
				
			}
		}
	}
</script>

<style lang="scss">

 .login-container {
	 
	 height: 750rpx;
	 background-color: #F8F8F8;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 position: relative;
	 overflow: hidden;
	 
	 // 绘制登录盒子底部的半椭圆造型
	 &::after {
	 content: ' ';
	 display: block;
	 position: absolute;
	 width: 100%;
	 height: 40px;
	 left: 0;
	 bottom: 0;
	 background-color: white;
	 border-radius: 100%;
	 transform: translateY(50%);
	 }
	 
	 .btn-login{
		 width: 90%;
		 margin: 15px 0;
		 border-radius: 100px;
		 background-color: #C00000;
		 
	 }
	 
	 .tips-text{
		 font-size: 15px;
		 color: gray
	 }
	 
	 
	 
 }
</style>